
import { Space, Table, Tag } from 'antd';
import type { TableProps } from 'antd';
import { Pagination } from 'antd';

import type { FormProps } from 'antd';
import { Button,  Form, Input } from 'antd';
import { Select } from 'antd';

import { DatePicker } from 'antd';

function Index() {
    
const { RangePicker } = DatePicker;
    type FieldType = {
        username?: string;
        password?: string;
        remember?: string;
      };
      
      const onFinish: FormProps<FieldType>['onFinish'] = (values) => {
        console.log('Success:', values);
      };
      
      const onFinishFailed: FormProps<FieldType>['onFinishFailed'] = (errorInfo) => {
        console.log('Failed:', errorInfo);
      };
      const onChange = (value: string) => {
        console.log(`selected ${value}`);
      };
      
      const onSearch = (value: string) => {
        console.log('search:', value);
      };
      
    interface DataType {
        key:string;
        ti: string;
        username:string;
        name: string;
        num: number;
        age:string;
        tag:string;
        address:string;
        tags:string;
        type:string;
        time:string;
        state:string;


        
      }
      
      const columns: TableProps<DataType>['columns'] = [
        {
          title: '集合编号',
          dataIndex: 'name',
          key: 'name',
          render: (text) => <a>{text}</a>,
        },
        {
          title: '集合名称',
          dataIndex: 'age',
          key: 'age',
        },
        {
          title: '内容体载',
          dataIndex: 'address',
          key: 'address',
        },
        {
            title: '筛选方式',
            dataIndex: 'type',
            key: 'type',
          },
          {
            title: '内容量',
            dataIndex: 'num',
            key: 'num',
          },
          {
            title: '创建时间',
            dataIndex: 'time',
            key: 'time',
          },
          {
            title: '状态',
            dataIndex: 'state',
            key: 'state',
          },
        {
          title: 'Action',
          key: 'action',
          render: () => (
            <Space size="middle">
              <a>查看 </a>
             
            </Space>
          ),
        },
      ];
      
      const data: DataType[] = [
        {
          key: '1',
          name: '232',
          age: '每日推荐视频集',
          address: '竖版视频',
          tags: ['nice', 'developer'],
          type:'规则筛选',
          num:315,
          time:'2021-02-28 10:30',
          state:'已上线'
        },
        {
            key: '2',
            name: '254',
            age: '每日推荐视频集',
            address: '图文',
            tags: ['nice', 'developer'],
            type:'人工',
            num:295,
            time:'2021-02-28 10:30',
            state:'已上线'
          },
          {
            key: '3',
            name: '46',
            age: '每日推荐视频集',
            address: '模版视频',
            tags: ['nice', 'developer'],
            type:'规则筛选',
            num:315,
            time:'2021-02-28 10:30',
            state:'已上线'
          },
          {
            key: '4',
            name: '577',
            age: '每日推荐视频集',
            address: '图文',
            tags: ['nice', 'developer'],
            type:'人工',
            num:295,
            time:'2021-02-28 10:30',
            state:'已上线'
          },
          {
            key: '5',
            name: '232',
            age: '每日推荐视频集',
            address: '竖版视频',
            tags: ['nice', 'developer'],
            type:'规则筛选',
            num:315,
            time:'2021-02-28 10:30',
            state:'已上线'
          },
          {
            key: '6',
            name: '254',
            age: '每日推荐视频集',
            address: '图文',
            tags: ['nice', 'developer'],
            type:'规则筛选',
            num:295,
            time:'2021-02-28 10:30',
            state:'已上线'
          },
          {
            key: '7',
            name: '577',
            age: '每日推荐视频集',
            address: '图文',
            tags: ['nice', 'developer'],
            type:'人工',
            num:295,
            time:'2021-02-28 10:30',
            state:'已上线'
          },
          {
            key: '8',
            name: '232',
            age: '每日推荐视频集',
            address: '竖版视频',
            tags: ['nice', 'developer'],
            type:'规则筛选',
            num:315,
            time:'2021-02-28 10:30',
            state:'已上线'
          },
          {
            key: '9',
            name: '254',
            age: '每日推荐视频集',
            address: '图文',
            tags: ['nice', 'developer'],
            type:'规则筛选',
            num:295,
            time:'2021-02-28 10:30',
            state:'已上线'
          },
          {
            key: '10',
            name: '577',
            age: '每日推荐视频集',
            address: '图文',
            tags: ['nice', 'developer'],
            type:'人工',
            num:295,
            time:'2021-02-28 10:30',
            state:'已上线'
          },
          {
            key: '11',
            name: '232',
            age: '每日推荐视频集',
            address: '竖版视频',
            tags: ['nice', 'developer'],
            type:'规则筛选',
            num:315,
            time:'2021-02-28 10:30',
            state:'已上线'
          },
          {
            key: '12',
            name: '254',
            age: '每日推荐视频集',
            address: '图文',
            tags: ['nice', 'developer'],
            type:'规则筛选',
            num:295,
            time:'2021-02-28 10:30',
            state:'已上线'
          },
          {
            key: '13',
            name: '577',
            age: '每日推荐视频集',
            address: '图文',
            tags: ['nice', 'developer'],
            type:'人工',
            num:295,
            time:'2021-02-28 10:30',
            state:'已上线'
          },
          {
            key: '14',
            name: '232',
            age: '每日推荐视频集',
            address: '竖版视频',
            tags: ['nice', 'developer'],
            type:'规则筛选',
            num:315,
            time:'2021-02-28 10:30',
            state:'已上线'
          },
          {
            key: '15',
            name: '254',
            age: '每日推荐视频集',
            address: '图文',
            tags: ['nice', 'developer'],
            type:'规则筛选',
            num:295,
            time:'2021-02-28 10:30',
            state:'已上线'
          },
      ];
      
  return (
    <div>
        <h3>查询表格</h3>
        <Form
    name="basic"
    labelCol={{ span: 8 }}
    wrapperCol={{ span: 16 }}
    style={{ maxWidth: 1200 }}
    initialValues={{ remember: true }}
    onFinish={onFinish}
    onFinishFailed={onFinishFailed}
    autoComplete="off"
    layout='inline'
  >
    集合编码<Form.Item<FieldType>
      label=""
      name="num"
      style={{width:'330px'}}
      rules={[{ required: true, message: 'Please input your username!' }]}
    >
      <Input placeholder='请输入集合编码'/>
    </Form.Item>
    集合名称<Form.Item<FieldType>
      label=""
      name="username"
      style={{width:'330px'}}
      rules={[{ required: true, message: '请输入集合名称' }]}
    >
      <Input placeholder='集合名称'/>
    </Form.Item>
    内容体载<Form.Item<FieldType>
      label=""
      name="ti"
      rules={[{ required: true, message: '请输入集合名称' }]}
    >
    <Select
    showSearch style={{width:'200px'}}
    placeholder="全部"
    optionFilterProp="label"
    onChange={onChange}
    onSearch={onSearch}
    options={[
      {
        value: '1',
        label: '图文',
      },
      {
        value: '2',
        label: '竖版视频',
      },
      {
        value: '3',
        label: '模版视频',
      },
    ]}
  />
    </Form.Item>
   
 

    <Form.Item label={null}>
      <Button type="primary" htmlType="submit">
        查询
      </Button>
    </Form.Item>
    
    筛选方式  <Form.Item<FieldType>
      label=""
      name="ti"
      rules={[{ required: true, message: '请输入集合名称' }]}
    >
    <Select
    showSearch style={{width:'200px'}}
    placeholder="全部"
    filterOption={(input, option) =>
      (option?.label ?? '').toLowerCase().includes(input.toLowerCase())
    }
    options={[
      { value: '1', label: '规则筛选' },
      { value: '2', label: '人工' },
      
    ]}
  />
    </Form.Item>
   创建时间
   <RangePicker showTime />
    
   状态  <Form.Item<FieldType>
      label=""
      name="ti"
      rules={[{ required: true, message: '请输入集合名称' }]}
    >
    <Select
    showSearch style={{width:'200px'}}
    placeholder="全部"
    filterOption={(input, option) =>
      (option?.label ?? '').toLowerCase().includes(input.toLowerCase())
    }
    options={[
      { value: '1', label: '已上线' },
      { value: '2', label: '已下线' },
      
    ]}
  />
    </Form.Item>
    <Form.Item label={null}>
      <Button type="primary" htmlType="submit">
        重置
      </Button>
    </Form.Item>
  </Form>
        <Table<DataType> columns={columns} dataSource={data} />
        <Pagination
    total={85}
    showSizeChanger
    showQuickJumper
    showTotal={(total) => `Total ${total} items`}
  />
    </div>
  )
}

export default Index
